import { Form, Input, Select, Cascader, Upload, Button, Icon } from 'antd';
import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import styles from './index.less';

const { Option } = Select;

@connect(({ category }) => ({
  cateData: category.cateData,
}))
class Step1 extends Component {
  // static defaultProps = {
  //   data: {},
  // };

  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  render() {
    const { cateData, form, data } = this.props;
    // if (!data) {
    //   return null;
    // }
    const { getFieldDecorator, validateFields } = form;
    const formItemLayout = {
      labelCol: {
        span: 5,
      },
      wrapperCol: {
        span: 19,
      },
    };
    return (
      <Fragment>
        <Form layout="horizontal" className={styles.stepForm}>
          <Form.Item {...formItemLayout} label="商品编码">
            {getFieldDecorator('good_sn', {
              rules: [{ required: true, message: '请选择付款账户' }],
            })(
              <Input placeholder="如无编码系统将自动生成" />,
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="商品名称">
            {getFieldDecorator('good_name', {
              rules: [{ required: true, message: '请输入商品名称' }],
            })(
              <Input placeholder="例如：Apple/苹果 iPhone Xs 64G国行手机" />,
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="商品分类">
            {getFieldDecorator('category', {
              rules: [{ required: true, message: '请选择商品分类' }],
            })(
              <Cascader
                options={cateData}
                expandTrigger="hover"
                // displayRender={displayRender}
                // onChange={onChange}
                placeholder="选择商品分类"
              />,
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="商城价">
            {getFieldDecorator('shop_price', {
              rules: [
                { required: true, message: '请输入商城价' },
                {
                  pattern: /^(\d+)((?:\.\d+)?)$/,
                  message: '请输入合法金额数字',
                },
              ],
            })(<Input prefix="￥" placeholder="请输入金额" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="销售价">
            {getFieldDecorator('sell_price', {
              rules: [
                { required: true, message: '请输入销售价' },
                {
                  pattern: /^(\d+)((?:\.\d+)?)$/,
                  message: '请输入合法金额数字',
                },
              ],
            })(<Input prefix="￥" placeholder="请输入金额" />)}
          </Form.Item>

          <Form.Item {...formItemLayout} label="商品视频">
            {getFieldDecorator('good_video',
            )(
              <Upload
                action="//jsonplaceholder.typicode.com/posts/"
                listType="picture"
                previewFile={file => {
                    console.log('Your upload file:', file);
                    return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
                    method: 'POST',
                    body: file,
                  })
                    .then(res => res.json())
                    .then(({ thumbnail }) => thumbnail);
                  }
                }
              >
                <Button>
                  <Icon type="upload" /> 上传视频
                </Button>
              </Upload>,
            )}
          </Form.Item>

          <Form.Item {...formItemLayout} label="封面图">
            {getFieldDecorator('good_cover', {
              rules: [
                { required: true, message: '请上传商品封面图' },
              ],
            })(
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                onChange={this.handleChange}
              >
                <Icon type="plus" />
              </Upload>,
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="商品主图">
            {getFieldDecorator('good_main_img', {
              rules: [
                { required: true, message: '请上传商品主图' },
              ],
            })(
              <Upload
                name="avatar"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                onChange={this.handleChange}
              >
                <Icon type="plus" />
              </Upload>,
            )}
          </Form.Item>


          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: {
                span: formItemLayout.wrapperCol.span,
                offset: formItemLayout.labelCol.span,
              },
            }}
            label=""
          >
            <Button type="primary">
              保存
            </Button>
            <Button style={{ marginLeft: 10 }}>
              下一步
            </Button>
          </Form.Item>
        </Form>
      </Fragment>
    );
  }
}

export default Form.create()(Step1);
